<template>
  <div class="page2">
    <h2 class="wow" style="visibility: visible">绿色建材让家越住越健康</h2>
    <div class="swipers">
      <swiper
        loop="true"
        @swiper="onSwiper"
        @slideChange="onSlideChange"
        :modules="modules"
        :pagination="pagination"
      >
        <swiper-slide v-for="(item,index) in List" :key="index">
          <div class="wrap">
            <div class="wow" v-for="(value,key) in item" :key="key" :style="{'animation-delay': (0.03+0.08*key)+'s', visibility: 'visible'}">
              <div class="text">
                <h2>{{ value.title }}</h2>
                <p>{{ value.dis }}</p>
              </div>
              <div class="img">
                <img
                  :src="value.image"
                  alt=""
                />
              </div>
            </div>
          </div>
        </swiper-slide>
        <div class="swiper-pagination pagin"></div>
      </swiper>
    </div>
  </div>
</template>

<script setup>
import { Pagination, A11y } from 'swiper/modules'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import { ref } from 'vue'
const pagination = ref({
  el: '.pagin'
})
const modules = ref([Pagination, A11y])
const List = ref([
  [
    {
      image:
        'https://www.shbotao.net//uploads/allimg/20211129/9239c2459db776a447fbfe6c0cb1b05c.png',
      title: '粘结材料',
      dis: '密封性良好，防开裂'
    },
    {
      image:
        'https://www.shbotao.net//uploads/allimg/20211129/9239c2459db776a447fbfe6c0cb1b05c.png',
      title: '粘结材料',
      dis: '密封性良好，防开裂'
    },
    {
      image:
        'https://www.shbotao.net//uploads/allimg/20211129/9239c2459db776a447fbfe6c0cb1b05c.png',
      title: '粘结材料',
      dis: '密封性良好，防开裂'
    },
    {
      image:
        'https://www.shbotao.net//uploads/allimg/20211129/9239c2459db776a447fbfe6c0cb1b05c.png',
      title: '粘结材料',
      dis: '密封性良好，防开裂'
    }
  ],
  [
    {
      image:
        'https://www.shbotao.net//uploads/allimg/20211129/9239c2459db776a447fbfe6c0cb1b05c.png',
      title: '粘结材料',
      dis: '密封性良好，防开裂'
    },
    {
      image:
        'https://www.shbotao.net//uploads/allimg/20211129/9239c2459db776a447fbfe6c0cb1b05c.png',
      title: '粘结材料',
      dis: '密封性良好，防开裂'
    },
    {
      image:
        'https://www.shbotao.net//uploads/allimg/20211129/9239c2459db776a447fbfe6c0cb1b05c.png',
      title: '粘结材料',
      dis: '密封性良好，防开裂'
    },
    {
      image:
        'https://www.shbotao.net//uploads/allimg/20211129/9239c2459db776a447fbfe6c0cb1b05c.png',
      title: '粘结材料',
      dis: '密封性良好，防开裂'
    }
  ]
])
const iniswiper = ref(null)
const onSwiper = (swiper) => {
  iniswiper.value = swiper
}
</script>

<style>
.cherrypick .page2 {
  padding: 1rem 0.3rem 0.3rem;
  background: url(/src/assets/img/matericl/p2_bj.jpg) no-repeat;
  background-size: 100% 100%;
}

.cherrypick .page2 > h2 {
  font-size: 0.56rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin-bottom: 0.83rem;
  opacity: 0;
  -webkit-animation: slide-down-in 1s, fade-in 1s;
  animation: slide-down-in 1s, fade-in 1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.cherrypick .page2 .swiper{
    padding-bottom: 0.5rem;
}
.cherrypick .page2 .swiper .swiper-pagination-bullet-active{
    background:#cecece;
}
.cherrypick .page2 .swiper .wrap > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.58rem;
  height: 2.07rem;
  background: #fff;
  border-radius: 0.1rem;
  margin-bottom: 0.2rem;
  opacity: 0;
  -webkit-animation: fade-in 1s;
  animation: fade-in 1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.cherrypick .page2 .swiper .wrap > div:nth-child(2n) .img {
  order: 1;
}

.cherrypick .page2 .swiper .wrap > div:nth-child(2n) .text {
  order: 2;
}

.cherrypick .page2 .swiper .wrap > div:nth-child(2n) h2,
.cherrypick .page2 .swiper .wrap > div:nth-child(2n) p {
  text-align: right;
}

.cherrypick .page2 .swiper .wrap > div div.img {
  height: 1.59rem;
}

.cherrypick .page2 .swiper .wrap > div div.img img {
  border-radius: 50%;
  width: 1.59rem;
  height: 1.59rem;
}

.cherrypick .page2 .swiper .wrap > div div h2 {
  font-size: 0.34rem;
  font-weight: 700;
  color: #000;
}

.cherrypick .page2 .swiper .wrap > div div p {
  font-size: 0.24rem;
  font-weight: 400;
  color: #666;
  margin-top: 0.05rem;
}
</style>